<!DOCTYPE html>
<html>

<head>
    <script src="js/vue.js"></script>
    <script src="js/velocity.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" placeholder="请输入查找的内容" v-model="query" />
        <!--  -->
        <fade-component :query="query" :items="items">
            <li v-for="(item,index) in ComputedList" :key="item.msg" :data-index="index">
                {{item.msg}}
            </li>
        </fade-component>
        <div>不符合查询匹配关键词的选项：</div>
        <fade-component>
            <li v-for="(item,index) in otherList" :key="item.msg" :data-index="index">
                {{item.msg}}
            </li>
        </fade-component>
    </div>
    <!-- <template id="temp">
            <transition-group name="item" tag="ul" @before-enter="beforeEnter" @enter="enter" @leave="leave">
                <slot></slot>
            </transition-group>
        </template> -->
    <script>
        Vue.component('fadeComponent', {
            functional: true,
            props: ['query', 'items'],
            render(createElement, ctx) {
                var data = {
                    props: {
                        tag: 'ul',
                        css: false,
                        id : 'id'
                    },
                    attrs : {
                        query : '123'
                    },
                    on: {
                        beforeEnter(el) {
                            el.style.opacity = 0;
                            el.style.height = 0;
                        },
                        enter(el, done) {
                            var delay = el.dataset.index * 150;
                            setTimeout(function () {
                                Velocity(el, { opacity: 1, height: '1.6em' }, { complete: done })
                            }, delay);
                        },
                        leave(el, done) {
                            var delay = el.dataset.index * 150;
                            setTimeout(function () {
                                Velocity(el, { opacity: 0, height: 0 }, { complete: done })
                            }, delay);
                        }
                    }
                }
                return createElement('transition-group', data, ctx.children);
            }
        });

        var vm = new Vue({
            el: '#app',
            data: {
                query: '',
                items: [
                    { msg: '张三' },
                    { msg: '李四' },
                    { msg: '张芳芳' },
                    { msg: '王琳琳' },
                    { msg: '冯圆' },
                ]
            },
            computed: {
                ComputedList() {
                    var nameList = this.items;
                    var vm = this.query;
                    return nameList.filter(function (item) {
                        return item.msg.toLowerCase().indexOf(vm.toLowerCase()) !== -1
                    })
                },
                otherList() {
                    var nameList = this.items;
                    var vm = this.query;
                    return nameList.filter(function (item) {
                        return item.msg.toLowerCase().indexOf(vm.toLowerCase()) === -1
                    })
                }
            }
        });
    </script>
</body>

</html>